<template>
  <div class="app-container">
    <div class="login-content ver-layout-center">
      <h1 class="title">OpenAi管理系统</h1>
      <el-form class="login-form">
        <el-form-item>
          <el-input clearable placeholder="用户名" v-model="formData.name">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable placeholder="密码" v-model="formData.password">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-button class="login-btn" type="primary" size="medium" @click="loginClick">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import {homePage} from "../router/pages"

export default {
  name: "login",
  data() {
    return {
      formData: {
        name: '',
        password: ''
      },
      userInfo: {
        name: 'admin',
        password: '321321'
      }
    }
  },
  mounted() {
  },
  methods: {
    loginClick() {
      let {name, password} = this.formData, errorMsg = ''
      if (name != this.userInfo.name) errorMsg = '用户名错误！'
      else if (password != this.userInfo.password) errorMsg = '密码错误！'
      if (errorMsg) this.$message.error(errorMsg)
      else this.$router.push(homePage)
    }
  }
}
</script>

<style scoped>
.app-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0f74ff, #2cdad3);
}

.login-content {
  margin: auto;
  padding-bottom: 50px;
}

.login-content > .title {
  color: rgba(74, 85, 104);
}

.login-form {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  background-color: white;
}

.login-btn {
  width: 100%;
}
</style>
